<template>
    <div :style="{height:(documentHeight-100)+'px'}" @scroll="scroll" style="overflow-y: scroll">
    <el-row>
      <el-col :span="6" style="padding-right: 15px">
        <el-card shadow='never'>
          <echart style="height: 300px" :option="echartOptions['option1']"/>
        </el-card>
      </el-col>
      <el-col :span="6" style="padding:0px 10px 0px 5px">
        <el-card shadow='never'>
          <echart style="height: 300px" :option="echartOptions['option2']"/>
        </el-card>
      </el-col>
      <el-col :span="6" style="padding:0px 5px 0px 10px">
        <el-card shadow='never'>
          <echart style="height: 300px" :option="echartOptions['option3']"/>
        </el-card>
      </el-col>
      <el-col :span="6" style="padding-left:15px">
        <el-card shadow='never'>
          <echart style="height: 300px" :option="echartOptions['option4']"/>
        </el-card>
      </el-col>
    </el-row>
    <el-row style="margin-top: 20px">
      <el-col :span="6" style="padding-right: 15px">
        <el-card shadow='never'>
          <echart style="height: 300px" :option="echartOptions['option5']"/>
        </el-card>
      </el-col>
      <el-col :span="6" style="padding:0px 10px 0px 5px">
        <el-card shadow='never'>
          <echart style="height: 300px" :option="echartOptions['option6']"/>
        </el-card>
      </el-col>
      <el-col :span="6" style="padding:0px 5px 0px 10px">
        <el-card shadow='never'>
          <echart style="height: 300px" :option="echartOptions['option7']"/>
        </el-card>
      </el-col>
      <el-col :span="6" style="padding-left:15px">
        <el-card shadow='never'>
          <echart style="height: 300px" :option="echartOptions['option8']"/>
        </el-card>
      </el-col>
    </el-row>
      <el-card style="margin-top: 20px;height: 600px" shadow="never">
         <span slot="header">
        <span>能源echart</span>
      </span>
        <energy-chart threshold="400" style="height: 500px" name="煤气消耗量" :content="echartOptions.energyData"/>
      </el-card>
    <el-card shadow='never' style="margin-top: 20px">
      <span slot="header">
        <span>button按钮展示</span>
      </span>
      <div>
        <div>
          <el-button size="mini" type="primary" @click="">默认按钮</el-button>
          <el-button size="mini" type="primary" disabled>默认禁止</el-button>
          <el-button size="mini" type="primary" :loading="true">默认加载</el-button>
          <el-button type="primary" size="mini">
            <svg-icon style="margin-right: 3px;" icon-class="import"/>
            导入
          </el-button>
          <el-button type="primary" size="mini">
            <svg-icon icon-class="import"/>
          </el-button>
          <el-button type="primary" size="mini">按钮
            <svg-icon style="" icon-class="chevron-down"/>
          </el-button>
        </div>
        <div style="margin-top: 10px">
          <el-button size="mini">透明按钮</el-button>
          <el-button size="mini" disabled>透明禁止</el-button>
          <el-button size="mini" :loading="true">透明加载</el-button>
          <el-button size="mini">
            <svg-icon style="margin-right: 3px;" icon-class="import"/>
            导入
          </el-button>
          <el-button size="mini">
            <svg-icon icon-class="import"/>
          </el-button>
          <el-button size="mini">按钮
            <svg-icon icon-class="chevron-down"/>
          </el-button>
        </div>
        <div style="margin-top: 10px">
          <el-button size="mini" type="danger">删除按钮</el-button>
          <el-button size="mini" type="danger" disabled>删除按钮</el-button>
          <el-button size="mini" type="danger" :loading="true">删除按钮</el-button>
          <el-button size="mini" type="danger" plain>危险按钮</el-button>
        </div>
        <div style="margin-top: 10px">
          <el-button type="text">文字按钮</el-button>
          <el-button type="text">展开
            <svg-icon icon-class="chevron-down"></svg-icon>
          </el-button>
          <el-button type="text" disabled>文字按钮</el-button>
          <el-button type="text" :loading="true">文字按钮</el-button>
        </div>
        <div style="margin-top: 10px;display: inline">
          <el-select size="mini" style="width: 120px;" v-model="value4" placeholder="请选择">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled">
            </el-option>
          </el-select>
          <el-select size="mini" style="width: 120px;margin-left: 20px" v-model="value4" placeholder="请选择" disabled>
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled">
            </el-option>
          </el-select>
          <el-select size="mini" style="width: 120px;margin-left: 20px" v-model="value5" placeholder="请选择"
                     :loading="true" loading-text="加载中...">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled">
            </el-option>
          </el-select>
        </div>
      </div>
    </el-card>
    <el-card shadow='never' style="margin-top: 20px">
      <span slot="header">
        <span>时间组件展示</span>
      </span>
      <el-form :inline="true">
        <el-form-item label="日期1">
          <day_picker
            :high-light-dates="highLightDates"
              v-model="date1"
              value-format="yyyy-MM-dd"
              format="yyyy-MM-dd"
              @change="dateChange"
              placeholder="选择日期">
          </day_picker>
        </el-form-item>
        <el-form-item label="日期2">
          <day_range_picker
              type="date"
              :high-light-dates="highLightDates"
              v-model="date2"
              range-interval='7'
              interval="3"
              value-format="yyyy-MM-dd"
              format="yyyy-MM-dd"
              start-placeholder="开始月"
              end-placeholder="结束月">
          </day_range_picker>
        </el-form-item>
      </el-form>
      <div>
        <day_picker
          :high-light-dates="highLightDates"
            :is-has-button='false'
            v-model="date2"
            type="datetimerange"
            placeholder="选择月份">
        </day_picker>
        <div style="margin-top: 10px"></div>
        <day_picker
            :is-has-button='false'
            v-model="date3"
            interval="5"
            format="yyyy-MM-dd"
            placeholder="选择日期">
        </day_picker>
        <div style="margin-top: 10px"></div>
        <day_picker
            v-model="date4"
            type="year"
            interval="11"
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
            placeholder="选择年">
        </day_picker>
        <div style="margin-top: 10px"></div>
        <day_range_picker
            v-model="date5"
            range-interval='180'
            value-format="yyyy-MM-dd"
            @change="dateChange"
            format="yyyy-MM-dd"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
        </day_range_picker>
        <div style="margin-top: 10px"></div>
        <day_range_picker
            style="width: 250px"
            :is-has-button="false"
            type="month"
            v-model="date6"
            range-interval='3'
            interval="3"
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
            start-placeholder="开始月"
            end-placeholder="结束月">
        </day_range_picker>
        <div style="margin-top: 10px"></div>
        <el-time-picker
            size="mini"
            v-model="value1"
            :picker-options="{selectableRange: '18:30:00 - 20:30:00'}"
            placeholder="任意时间点">
        </el-time-picker>
      </div>
    </el-card>
    <el-card shadow='never' style="margin-top: 20px">
      <span slot="header">
        <span>按钮切换展示</span>
      </span>
      <el-radio-group size="mini" v-model="value1">
        <el-radio-button label="上海"></el-radio-button>
        <el-radio-button label="北京"></el-radio-button>
        <el-radio-button label="广州"></el-radio-button>
        <el-radio-button label="深圳"></el-radio-button>
      </el-radio-group>
    </el-card>
      <el-card shadow='never' style="margin-top: 20px">
      <span slot="header">
        <span>导入下载功能展示</span>
      </span>
        <el-upload
            style="display: inline"
            action="/api/common/upload"
            multiple
            :show-file-list = 'false'>
          <el-button type="primary" size="mini">
            <svg-icon style="margin-right: 3px;" icon-class="import"/>
            导入
          </el-button>
        </el-upload>
      </el-card>
    <el-card shadow='never' style="margin-top: 20px">
      <span slot="header">
        <span>搜索功能展示</span>
      </span>
      <el-form v-enter-number :inline="true">
        <el-form-item label="条件1">
          <el-input  size="mini" placeholder="请输入条件1" v-model="value2"/>
        </el-form-item>
        <el-form-item label="条件2">
          <el-input size="mini" placeholder="请输入条件2" v-model="value3"/>
        </el-form-item>
        <el-form-item label="单选">
          <el-select size="mini" v-model="value4" placeholder="请选择">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="级联选择">
          <el-cascader
              size="mini"
              v-model="value5"
              :options="cOptions"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="多选">
          <el-select multiple size="mini" v-model="value8" placeholder="请选择">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="分组选">
          <el-select size="mini" v-model="value9" placeholder="请选择">
            <el-option-group
                v-for="group in groupOptions"
                :key="group.label"
                :label="group.label">
              <el-option
                  v-for="item in group.options"
                  :key="item.value"
                  :label="item.label"
                  :disabled="item.disabled"
                  :value="item.value">
              </el-option>
            </el-option-group>
          </el-select>
        </el-form-item>
      </el-form>
    </el-card>
<!--    <el-card shadow='never' style="margin-top: 20px">-->
<!--      <div slot="header">-->
<!--        <span>上传组件展示</span>-->
<!--      </div>-->
<!--      <el-upload-->
<!--          action="https://jsonplaceholder.typicode.com/posts/"-->
<!--          multiple-->
<!--          :limit="3"-->
<!--      >-->
<!--        <el-button size="mini" type="primary">点击上传</el-button>-->
<!--        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->
<!--      </el-upload>-->
<!--      <br>-->
<!--      <el-upload-->
<!--          action="https://jsonplaceholder.typicode.com/posts/"-->
<!--          list-type="picture-card">-->
<!--        <i class="el-icon-plus"></i>-->
<!--      </el-upload>-->
<!--    </el-card>-->
<!--    <el-card shadow='never' style="margin-top: 20px">-->
<!--      <div slot="header">-->
<!--        <span>穿梭框组件展示</span>-->
<!--      </div>-->
<!--      <el-transfer v-model="value6" :data="data"></el-transfer>-->
<!--    </el-card>-->

    <el-card shadow='never' style="margin-top: 20px">
      <span slot="header">
        <span>全局图标(通过svg-icon组件使用，点击复制图标的name)</span>
      </span>
      <div class="bac">
        <svg-icon :key="key" v-for="key of icons" @click="copyIcon(key)"
                  style="margin: 10px 10px;cursor: pointer;fill: currentColor; color: #37393d"
                  :icon-class="key"></svg-icon>
      </div>
    </el-card>
    <el-card shadow='never' style="margin-top: 20px">
      <span slot="header">
        <span>单选按钮多选按钮展示</span>
      </span>
      <el-radio-group v-model="radio">
        <el-radio :label="3">备选项1</el-radio>
        <el-radio :label="6">备选项2</el-radio>
        <el-radio :label="9">备选项3</el-radio>
      </el-radio-group>

      <el-checkbox-group v-model="checkedCities">
        <el-checkbox v-for="city in cities" :label="city" :key="city">{{ city }}</el-checkbox>
      </el-checkbox-group>
    </el-card>
    <el-card shadow='never' style="margin-top: 20px">
      <span slot="header">
        <span>输入框展示</span>
      </span>
      <el-form size="mini" :inline="true" :rules="rules" :model="formInline" class="demo-form-inline">
        <el-form-item label="基本输入:" prop="user">
          <el-input v-model="formInline.user" placeholder="请输入内容"><template slot="append">Http://</template></el-input>
        </el-form-item>
        <el-form-item label="搜索框:" prop="region">
          <el-input suffix-icon="el-icon-search" v-model="formInline.region" placeholder="请输入搜索内容"></el-input>
        </el-form-item>
        <el-form-item label="选择日期:" prop="date">
          <day_picker
              :is-has-button='false'
              v-model="date3"
              interval="5"
              format="yyyy-MM-dd"
              placeholder = "请输入日期">
          </day_picker>
        </el-form-item>
      </el-form>
      <el-form size="mini" :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="基本输入:">
          <el-input disabled v-model="formInline.user" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="搜索框:">
          <el-input :readonly="true" suffix-icon="el-icon-search" v-model="formInline.region"
                    placeholder="请输入搜索内容"></el-input>
        </el-form-item>
      </el-form>
      <el-input
          style="width: 500px"
          type="textarea"
          :rows="2"
          placeholder="请输入内容"
          v-model="textarea">
      </el-input>
    </el-card>
    <el-card shadow='never' style="margin-top: 20px">
      <span slot="header">
        <span>表格展示</span>
        <table-change @change="tableSize = $event" style="float: right;"/>
      </span>
<!--      <div>-->
<!--        <div style="float: right;margin-bottom: 3px">-->
<!--          <span :class="{'is-active':tableSize==='small'}" @click="tableSize = 'small'" class="table-icon"><svg-icon  icon-class="order-ascending"></svg-icon></span>-->
<!--          <span :class="{'is-active':tableSize==='mini'}" @click="tableSize = 'mini'" class="table-icon"><svg-icon  icon-class="menu-unfold"></svg-icon></span>-->
<!--        </div>-->
<!--      </div>-->
      <el-table
          :size="tableSize"
          :cell-style="({ column })=>column.type==='index'&&'color:#999999'"
          :default-sort="{prop: 'date', order: 'descending'}"
          :data="tableData"
          row-key="id"
          :tree-props="{children: 'children'}"
          highlight-current-row
          style="width: 100%">
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column
            align="center"
            label="序号"
            type="index"
            width="50">
        </el-table-column>
        <el-table-column
            prop="date"
            label="日期"
            sortable
            width="180">
        </el-table-column>
        <el-table-column
            prop="name"
            label="姓名"
            sortable
            width="180">
        </el-table-column>
        <el-table-column
            prop="address"
            label="地址">
          <template v-slot="{row}">
            <el-tooltip v-if="row.content"  :content="row.content" placement="right">
              <span style="color: #a67575">{{ row.address }}</span>
            </el-tooltip>
            <span v-else style="color: #a67575">{{ row.address }}</span>
          </template>
        </el-table-column>
        <el-table-column
            prop="address"
            align="center"
            label="操作">
          <template>
            <el-link :click-change-color="true" :underline="false" style="margin-left: 5px" type="primary">编辑</el-link>
            <span style="margin-left: 5px;color:#CCCCCC">|</span>
            <el-link :underline="false" style="margin-left: 5px" type="danger">删除</el-link>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          style="margin-top: 20px"
          small
          background
          :current-page="currentPage"
          :page-size="100"
          layout="total,prev, pager, next,jumper"
          :total="1000">
      </el-pagination>
    </el-card>
<!--    <el-card shadow='never' style="margin-top: 20px">-->
<!--      <div slot="header">-->
<!--        <span>树展示</span>-->
<!--      </div>-->
<!--      <el-tree style="width: 300px" :data="treeData"></el-tree>-->
<!--    </el-card>-->

<!--    <el-card shadow='never' style="margin-top: 20px">-->
<!--      <div slot="header">-->
<!--        <span>loading展示</span>-->
<!--      </div>-->
<!--      <div-->
<!--          style="width: 100%;height: 200px;"-->
<!--          v-loading="loading"-->
<!--          element-loading-text="拼命加载中"-->
<!--          element-loading-spinner="el-icon-loading"-->
<!--          element-loading-background="rgba(0, 0, 0, 0.8)"-->
<!--      >-->
<!--        <el-button size="mini" type="primary" @click="loading=true">loading</el-button>-->
<!--      </div>-->
<!--    </el-card>-->
    <el-card shadow='never' style="margin-top: 20px">
      <span slot="header">
        <span>消息弹框展示</span>
      </span>
      <el-button type="primary" size="mini" @click="open2">成功</el-button>
      <el-button type="primary" size="mini" @click="open3">警告</el-button>
      <el-button type="primary" size="mini" @click="open1">消息</el-button>
      <el-button type="primary" size="mini" @click="open4">错误</el-button>
      <el-button type="primary" size="mini" @click="open6">报警</el-button>
      <el-button type="primary" size="mini" @click="open5">消息弹框</el-button>
    </el-card>
    <el-card shadow='never' style="margin-top: 20px">
      <span slot="header">
        <span>开关展示</span>
      </span>
      <div>
        <el-switch
            v-model="sValueFalse"
            :active-color="$themes.getSwitch().on"
            :inactive-color="$themes.getSwitch().down">
        </el-switch>
        <el-switch
            :active-color="$themes.getSwitch().on"
            :inactive-color="$themes.getSwitch().down"
            v-model="sValueTrue"
        >
        </el-switch>
        <el-switch
            :active-color="$themes.getSwitch().on"
            :inactive-color="$themes.getSwitch().down"
            v-model="sValueFalse"
            disabled>
        </el-switch>
        <el-switch
            :active-color="$themes.getSwitch().on"
            :inactive-color="$themes.getSwitch().down"
            v-model="sValueTrue"
            disabled>
        </el-switch>
      </div>
      <div>
        <el-switch
            size="mini"
            v-model="sValueFalse"
            :active-color="$themes.getSwitch().on"
            :inactive-color="$themes.getSwitch().down">
        </el-switch>
        <el-switch
            size="mini"
            :active-color="$themes.getSwitch().on"
            :inactive-color="$themes.getSwitch().down"
            v-model="sValueTrue"
        >
        </el-switch>
        <el-switch
            size="mini"
            :active-color="$themes.getSwitch().on"
            :inactive-color="$themes.getSwitch().down"
            v-model="sValueFalse"
            disabled>
        </el-switch>
        <el-switch
            size="mini"
            :active-color="$themes.getSwitch().on"
            :inactive-color="$themes.getSwitch().down"
            v-model="sValueTrue"
            disabled>
        </el-switch>
      </div>
    </el-card>
    <el-card shadow='never' style="margin-top: 20px">
      <span slot="header">
        <span>抽屉展示</span>
      </span>
      <el-radio-group v-model="direction">
        <el-radio label="ltr">从左往右开</el-radio>
        <el-radio label="rtl">从右往左开</el-radio>
      </el-radio-group>
      <el-button size="mini" @click="drawer = true" type="primary" style="margin-left: 16px;">
        点我打开
      </el-button>

      <el-drawer
          :modal="false"
          :show-close = 'false'
          title="我是标题"
          :visible.sync="drawer"
          :direction="direction">
        <div class="el-drawer__content">
          <el-form :model="form">
            <el-form-item label="活动名称：" label-width="120px">
              <el-input style="width: 300px" placeholder="请选择活动名称" size="mini" v-model="form.name"
                        autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="活动区域：" label-width="120px">
              <el-select style="width: 300px" size="mini" v-model="form.region" placeholder="请选择活动区域">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="活动日期：" label-width="120px">
              <day_picker
                  :is-has-button='false'
                  style="width: 300px"
                  v-model="date3"
                  interval="5"
                  format="yyyy-MM-dd"
                  placeholder="请选择活动日期">
              </day_picker>
            </el-form-item>
          </el-form>
        </div>
        <div class="el-drawer__footer">
          <el-button size="mini" @click="">取 消</el-button>
          <el-button size="mini" type="primary" :loading="loading">确 定</el-button>
        </div>
      </el-drawer>
    </el-card>
    <el-card shadow='never' style="margin-top: 20px">
      <span slot="header">
        <span>tabs展示</span>
      </span>
      <div>
        <el-tabs v-model="value7">
          <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
          <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
          <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
          <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
        </el-tabs>
      </div>
      <div>
        <el-tabs v-model="value7">
          <el-tab-pane icon="pie-chart" label="用户管理" name="first">用户管理</el-tab-pane>
          <el-tab-pane icon="logo-windows" label="配置管理" name="second">配置管理</el-tab-pane>
          <el-tab-pane icon="goods" label="角色管理" name="third">角色管理</el-tab-pane>
          <el-tab-pane icon="warning" label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
    <el-card shadow='never' style="margin-top: 20px">
      <span slot="header">
        <span>Dialog和form表单展示</span>
      </span>
      <el-button size="mini" type="primary" @click="dialogFormVisible=true">弹出</el-button>
    </el-card>
    <el-card shadow='never' style="margin-top: 20px">
      <span slot="header">
        <span>Tooltip展示</span>
      </span>
      <div class="box">
        <div class="top">
          <el-tooltip class="item" content="Top Left 提示文字" placement="top-start">
            <el-button type="primary" size="mini">上左</el-button>
          </el-tooltip>
          <el-tooltip class="item" content="Top Center 提示文字" placement="top">
            <el-button type="primary" size="mini">上边</el-button>
          </el-tooltip>
          <el-tooltip class="item" content="Top Right 提示文字" placement="top-end">
            <el-button type="primary" size="mini">上右</el-button>
          </el-tooltip>
        </div>
        <div class="left">
          <el-tooltip class="item"  content="Left Top 提示文字" placement="left-start">
            <el-button type="primary" size="mini">左上</el-button>
          </el-tooltip>
          <el-tooltip class="item"  content="Left Center 提示文字" placement="left">
            <el-button type="primary" size="mini">左边</el-button>
          </el-tooltip>
          <el-tooltip class="item"  content="Left Bottom 提示文字" placement="left-end">
            <el-button type="primary" size="mini">左下</el-button>
          </el-tooltip>
        </div>

        <div class="right">
          <el-tooltip class="item"  content="Right Top 提示文字" placement="right-start">
            <el-button type="primary" size="mini">右上</el-button>
          </el-tooltip>
          <el-tooltip class="item"  content="Right Center 提示文字" placement="right">
            <el-button type="primary" size="mini">右边</el-button>
          </el-tooltip>
          <el-tooltip class="item"  content="Right Bottom 提示文字" placement="right-end">
            <el-button type="primary" size="mini">右下</el-button>
          </el-tooltip>
        </div>
        <div class="bottom">
          <el-tooltip class="item"  content="Bottom Left 提示文字" placement="bottom-start">
            <el-button type="primary" size="mini">下左</el-button>
          </el-tooltip>
          <el-tooltip class="item"  content="Bottom Center 提示文字" placement="bottom">
            <el-button type="primary" size="mini">下边</el-button>
          </el-tooltip>
          <el-tooltip class="item"  content="Bottom Right 提示文字" placement="bottom-end">
            <el-button type="primary" size="mini">下右</el-button>
          </el-tooltip>
        </div>
      </div>
    </el-card>
      <el-dialog width="30%" title="收货地址" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="活动名称：" label-width="120px">
            <el-input style="width: 300px" placeholder="请选择活动名称" size="mini" v-model="form.name"
                      autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="活动区域：" label-width="120px">
            <el-select style="width: 300px" size="mini" v-model="form.region" placeholder="请选择活动区域">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="活动日期：" label-width="120px">
            <day_picker
              :is-has-button='false'
              style="width: 300px"
              v-model="date3"
              interval="5"`
              format="yyyy-MM-dd"
              placeholder="请选择活动日期">
            </day_picker>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button size="mini" @click="dialogFormVisible = false">取 消</el-button>
          <el-button size="mini" type="primary" @click="dialogFormVisible = false">确 定</el-button>
        </div>
      </el-dialog>
  </div>
</template>

<script>
import echartOptions from "../util/echartOptions";
import NProgress from "@/util/progress";
import iconNames from "@/util/iconNames";
import {debounce} from "@/util";
const scroll = debounce(function (items) {
  this.$store.getters.popperItems.forEach(item => {
    const ele = item.popperElement()
    ele && (ele.style.opacity = '1')
  })
}, 300)
const generateData = _ => {
  const data = [];
  for (let i = 1; i <= 15; i++) {
    data.push({
      key: i,
      label: `备选项 ${i}`,
      disabled: i % 4 === 0
    });
  }
  return data;
};
export default {
  name: "components",
  data() {
    return {
      highLightDates:['2022-11-15','2022-11-17'],
      energyData:[],
      isActive:0,
      tableSize: "",
      currentPage:1,
      groupOptions: [{
        label: '热门城市',
        options: [{
          value: 'Shanghai',
          label: '上海'
        }, {
          value: 'Beijing',
          label: '北京',
          disabled: true
        }]
      }, {
        label: '城市名',
        options: [{
          value: 'Chengdu',
          label: '成都'
        }, {
          value: 'Shenzhen',
          label: '深圳'
        }, {
          value: 'Guangzhou',
          label: '广州'
        }, {
          value: 'Dalian',
          label: '大连'
        }]
      }],
      textarea: '',
      formInline: {
        user: '',
        region: '',
        date: ''
      },
      rules: {
        user: [
          {required: true, message: '请输入名称', trigger: 'blur'},
        ],
      },
      checkedCities: ['上海', '北京'],
      cities: ['上海', '北京', '广州', '深圳'],
      radio: 3,
      icons: iconNames,
      dialogFormVisible: false,
      form: {
        name: '',
        region: '',
        date: '',
      },
      loading: false,
      tableData: [
        {
        id:1,
        date: '2016-05-02',
        name: '王小虎',
        address: '这是一段非常长的内容...',
        content: '这是一段非常长的内容,在规定时间内完成沟体和材料设计，并提供沟体施工图，以及详细的施工作业、烘烤、维护方案',
      }, {
        id:2,
        date: '2016-05-04',
        name: '王小虎',
        children:[
          {
            id:5,
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            id:6,
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }
        ],
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        id:3,
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        id:4,
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      treeData: [{
        label: '一级 1',
        children: [{
          label: '二级 1-1',
          children: [{
            label: '三级 1-1-1'
          }]
        }]
      }, {
        label: '一级 2',
        children: [{
          label: '二级 2-1',
          children: [{
            label: '三级 2-1-1'
          }]
        }, {
          label: '二级 2-2',
          children: [{
            label: '三级 2-2-1'
          }]
        }]
      }, {
        label: '一级 3',
        children: [{
          label: '二级 3-1',
          children: [{
            label: '三级 3-1-1'
          }]
        }, {
          label: '二级 3-2',
          children: [{
            label: '三级 3-2-1'
          }]
        }]
      }],
      data: generateData(),
      date1: '2022-11-12',
      date2: '',
      date3: '',
      date4: '',
      date5: new Date(),
      date6: '',
      value1: '',
      value2: '',
      value3: '',
      value4: '',
      value5: '',
      value6: [1, 4],
      value7: '',
      value8: '',
      value9: '',
      direction:'rtl',
      drawer:false,
      dialogVisible: false,
      p: 0,
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶',
        disabled: true
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      sValueTrue:true,
      sValueFalse:false,
      value: '',
      cValue: '',
      cOptions: [{
        value: 'zhinan',
        label: '指南',
        children: [{
          value: 'shejiyuanze',
          label: '设计原则',
          children: [{
            value: 'yizhi',
            label: '一致'
          }, {
            value: 'fankui',
            label: '反馈'
          }, {
            value: 'xiaolv',
            label: '效率'
          }, {
            value: 'kekong',
            label: '可控'
          }]
        }, {
          value: 'daohang',
          label: '导航',
          children: [{
            value: 'cexiangdaohang',
            label: '侧向导航'
          }, {
            value: 'dingbudaohang',
            label: '顶部导航'
          }]
        }]
      }, {
        value: 'zujian',
        label: '组件',
        children: [{
          value: 'basic',
          label: 'Basic',
          children: [{
            value: 'layout',
            label: 'Layout 布局'
          }, {
            value: 'color',
            label: 'Color 色彩'
          }, {
            value: 'typography',
            label: 'Typography 字体'
          }, {
            value: 'icon',
            label: 'Icon 图标'
          }, {
            value: 'button',
            label: 'Button 按钮'
          }]
        }, {
          value: 'form',
          label: 'Form',
          children: [{
            value: 'radio',
            label: 'Radio 单选框'
          }, {
            value: 'checkbox',
            label: 'Checkbox 多选框'
          }, {
            value: 'input',
            label: 'Input 输入框'
          }, {
            value: 'input-number',
            label: 'InputNumber 计数器'
          }, {
            value: 'select',
            label: 'Select 选择器'
          }, {
            value: 'cascader',
            label: 'Cascader 级联选择器'
          }, {
            value: 'switch',
            label: 'Switch 开关'
          }, {
            value: 'slider',
            label: 'Slider 滑块'
          }, {
            value: 'time-picker',
            label: 'TimePicker 时间选择器'
          }, {
            value: 'date-picker',
            label: 'DatePicker 日期选择器'
          }, {
            value: 'datetime-picker',
            label: 'DateTimePicker 日期时间选择器'
          }, {
            value: 'upload',
            label: 'Upload 上传'
          }, {
            value: 'rate',
            label: 'Rate 评分'
          }, {
            value: 'form',
            label: 'Form 表单'
          }]
        }, {
          value: 'data',
          label: 'Data',
          children: [{
            value: 'table',
            label: 'Table 表格'
          }, {
            value: 'tag',
            label: 'Tag 标签'
          }, {
            value: 'progress',
            label: 'Progress 进度条'
          }, {
            value: 'tree',
            label: 'Tree 树形控件'
          }, {
            value: 'pagination',
            label: 'Pagination 分页'
          }, {
            value: 'badge',
            label: 'Badge 标记'
          }]
        }, {
          value: 'notice',
          label: 'Notice',
          children: [{
            value: 'alert',
            label: 'Alert 警告'
          }, {
            value: 'loading',
            label: 'Loading 加载'
          }, {
            value: 'message',
            label: 'Message 消息提示'
          }, {
            value: 'message-box',
            label: 'MessageBox 弹框'
          }, {
            value: 'notification',
            label: 'Notification 通知'
          }]
        }, {
          value: 'navigation',
          label: 'Navigation',
          children: [{
            value: 'menu',
            label: 'NavMenu 导航菜单'
          }, {
            value: 'tabs',
            label: 'Tabs 标签页'
          }, {
            value: 'breadcrumb',
            label: 'Breadcrumb 面包屑'
          }, {
            value: 'dropdown',
            label: 'Dropdown 下拉菜单'
          }, {
            value: 'steps',
            label: 'Steps 步骤条'
          }]
        }, {
          value: 'others',
          label: 'Others',
          children: [{
            value: 'dialog',
            label: 'Dialog 对话框'
          }, {
            value: 'tooltip',
            label: 'Tooltip 文字提示'
          }, {
            value: 'popover',
            label: 'Popover 弹出框'
          }, {
            value: 'card',
            label: 'Card 卡片'
          }, {
            value: 'carousel',
            label: 'Carousel 走马灯'
          }, {
            value: 'collapse',
            label: 'Collapse 折叠面板'
          }]
        }]
      }, {
        value: 'ziyuan',
        label: '资源',
        children: [{
          value: 'axure',
          label: 'Axure Components'
        }, {
          value: 'sketch',
          label: 'Sketch Templates'
        }, {
          value: 'jiaohu',
          label: '组件交互文档'
        }]
      }]
    }
  },
  computed: {
    echartOptions() {
      return echartOptions
    },
    documentHeight(){
      return this.$store.getters.documentHeight
    },
  },
  methods: {
    scroll() {
      this.$store.getters.popperItems.forEach(item => {
        if (item.popperShow) {
          const ele = item.popperElement()
          ele && (ele.style.opacity = "0")
          item.showDown()
        }
      })
      scroll.call(this)
    },
    copyIcon(key) {
      const url = '我是要被复制的内容'
      let oInput = document.createElement('input')
      oInput.value = key
      document.body.appendChild(oInput)
      oInput.select() // 选择对象;
      document.execCommand('Copy') // 执行浏览器复制命令
      oInput.remove()
      this.$message.success('复制图标成功！');
    },
    open1() {
      this.$message({
        message: '这是一条消息提示',
        content: '这是一条消息提示,需要提示一些内容！',
        showClose: true
      });
    },
    open2() {
      this.$message({
        message: '恭喜你，这是一条成功消息',
        content: '成功的信息，需要提示一些成功的内容！',
        type: 'success',
        showClose: true
      });
    },

    open3() {
      this.$message({
        message: '警告哦，这是一条警告消息',
        type: 'warning',
        content: '警告的信息，需要提示一些警告的内容！',
        showClose: true
      });
    },

    open4() {
      this.$message({
        message: '抱歉哦，这是一条错误消息',
        type: 'error',
        content: '错误的信息，需要提示一些错误的内容！',
        showClose: true

      });
    },
    open6() {
      this.$message({
        message: '严重了，这是一条报警消息',
        type: 'alarm',
        content: '报警的信息，需要提示一些严重的内容！',
        showClose: true
      });
    },
    open5() {
      this.$confirm(`此操作将永久删除该文件, 是否继续?<div><span style="font-size: 10px">上次</span></div>`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        dangerouslyUseHTMLString:true,
        type: 'warning'
      }).then(() => {
        this.$message({
          duration:100000,
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    dateChange() {
    },
    doClick() {
      NProgress.start()
    },
    f(fn) {
      let time
      return function () {
        time && clearTimeout(time)
        time = setTimeout(() => {
          fn()
        }, 100)
      }
    },
  },
  mounted() {
  }
}
</script>

<style scoped lang="scss">
.bac {
  width: 95%;
  min-height: 30px;
  border-radius: 4px;
  padding: 10px 10px;
  display: flex;
  align-content: space-between;
  flex-wrap: wrap;
}

.box {
  width: 400px;
}

.top {
  text-align: center;
}

.left {
  float: left;
  width: 60px;
}

.right {
  float: right;
  width: 60px;
}

.bottom {
  clear: both;
  text-align: center;
}

.item {
  margin: 4px;
}

.left .el-tooltip__popper,
.right .el-tooltip__popper {
  padding: 8px 10px;
}
.table-icon{
  padding: 0px 2px;
  margin-right: 5px;
  cursor: pointer;
  border-radius: 3px;
}
.table-icon :hover{
  fill: #477af1;
}
.table-icon :focus{
  fill:#5C8DFF;
}
</style>
